<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Split it up</title> 
</head> 

<body> 
<div data-role="page" id="show-bill">
    <div data-role="header" data-position="fixed">
        <a href="start.html" data-icon="arrow-l" data-role="button" data-rel="back">back</a>
        <h4>Bill Name</h4>
    </div>
    <!-- /header -->
    
    <div data-role="content" id="current-bill" >   
    	
        <div style="clear:both;">
            <div data-role="controlgroup" data-type="horizontal">
                <a href="add_person.html" data-mini="true" data-role="button" data-icon="plus" >people</a>
                <a href="add_item.html" data-mini="true" data-role="button" data-icon="plus" >item</a>
                <a href="index.html" data-mini="true" data-role="button" data-icon="forward" >split it up</a>
            </div>
        </div>
        <!-- bill items-->
        <!-- bill items list -->
        <div style="clear:both;margin-top:2%;">
            <ul data-role="listview" data-theme="a" data-inset="true" id="bill-items" data-split-icon="delete" data-split-theme="b">
                <li data-role="list-divider">items</li>
                <li>
                    <a href="#">
                        <h3>food item name 300.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
                
                <li>
                    <a href="#">
                        <h3>food item name 300.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
                
                <li>
                    <a href="#">
                        <h3>food item name 300.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
                
                <!-- bill particulars -->
                <!-- bill particulars list -->
                <li data-role="list-divider">particulars</li>
                <li>
                    <a href="#">
                        <h3>10% discount 100.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
                <li>
                    <a href="#">
                        <h3>10% tax 10.00</h3>
                    </a>
                    <a href="#">remove</a>
                </li>
            </ul>
        </div>
        
        <!-- bill total -->
        <div style="clear:both;">
            <ul data-role="listview" data-theme="a" data-inset="true" id="bill-total">
                <li data-role="list-divider">total</li>
                <li>300</li>
            </ul>
        </div>
    </div><!-- /content -->
    
    <div data-role="footer" data-position="fixed">
        <h4>ad space</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>